<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Streamgraph</title>
    <script type="text/javascript" src="../../deps/d3.js"></script>
    <script type="text/javascript" src="../../deps/raphael.min.js"></script>
    <script type="text/javascript" src="../../deps/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../deps/seajs/sea.js"></script>

    <style type="text/css">
#chart {
    border-top: 1px dashed #F00;
    border-bottom: 1px dashed #F00;
    padding-left: 20px;
}
    </style>
  </head>
  <body>

    <div id="clickInfo">clickInfo</div>
    <div id="hoverInfo">hoverInfo</div>
    <div id="chart"></div>

    <script type="text/javascript">
    //http://planetozh.com/blog/2008/04/javascript-basename-and-dirname/
    var dir = window.location.href.replace(/\\/g,'/').replace(/\/[^\/]*$/, '');
    seajs.config({
        alias: {
            'datav': dir + '/../../datav.js',
            'stream': dir + '/../../libs/stream.js'
        }
    });
    seajs.use(["stream", "datav"], function (Stream, DataV) {
        DataV.changeTheme("theme0");
        var stream = new Stream("chart", {"width": 800});
        stream.setUserConfig({"more": false});
        //DataV.csv("streamDataExample.csv", function (source) {
        DataV.csv("streamDataExample.csv", function (source) {
            stream.setSource(source);
            /*
            stream.on("mousemove", function(data) {
                console.log(data.timeIndex + " " + data.pathIndex);
                });
            */
            stream.render();
        });
    });

    </script>

  </body>
</html>
